<template>
  <div v-if="roomInfo">
    <view class="header">
      <view class="round_view">
        <swiper :current="swiperCurrent" @change="swiperChange" class="swiper">
          <swiper-item v-for="(item, index) in roomInfo.roomPhoto" :key="index">
            <image mode="center" :src="item" class="roundImg"></image>
          </swiper-item>
        </swiper>
        <view class="dots">
          <view v-for="(item, index) in roomInfo.roomPhoto" :key="index" :class="{active:index === swiperCurrent}"
                class="dot"></view>
        </view>
      </view>
      <view class="tabs">
        <view class="tabs_left" @click="switchNav(0)">
          <view class="firend" v-bind:class="{on:currentTab===0}">朋友圈</view>
        </view>
        <view class="tabs_right" @click="switchNav(1)">
          <view class="personal" v-bind:class="{on:currentTab===1}">个人信息</view>
        </view>
      </view>
    </view>


    <view class="content">
      <information :age="roomInfo.age" :name="roomInfo.name" :ownerId="roomInfo.ownerId"/>
      <view v-if='currentTab===0'>
        <view class="left">

          <view v-if="dynamics" class="sound">
            <template v-for="(item, index) in dynamics">
              <card :dynamic="item" :key="index"/>
            </template>
          </view>
        </view>
        <!--</view>-->
      </view>
      <view class="null_view1"></view>
      <view v-if='currentTab===1'>
        <view class="right">
          <view class="tag_name">标签</view>
          <view class="tag_content">
            <tag v-for="(item, index) in roomInfo.tagsName" :text="item" :key="index"/>
          </view>
          <view class="tag_name">我的信息</view>
          <view class="info_content">
            <view class="my_info" v-if="roomInfo.address">
              <view class="my_info_left">来自</view>
              <view class="my_info_right">{{roomInfo.address}}</view>
            </view>

            <view class="my_info" v-if="roomInfo.profession">
              <view class="my_info_left">职业</view>
              <view class="my_info_right">{{roomInfo.profession}}</view>
            </view>
            <view class="my_info" v-if="roomInfo.company">
              <view class="my_info_left">公司</view>
              <view class="my_info_right">博谷文化创意有限公司序员</view>
            </view>

            <view class="my_info" v-if="roomInfo.times">
              <view class="my_info_left">时光轨迹</view>
              <view class="my_info_right">
                <view>酒吧</view>
                <view>酒吧</view>
                <view>酒吧</view>
              </view>
            </view>

            <view class="my_info last" v-if="roomInfo.signature">
              <view class="my_info_left ">个性签名</view>
              <view class="my_info_right spec">{{roomInfo.signature}}</view>
            </view>

          </view>
          <view class="get_bottom">
            <view class="left"></view>
            <view class="center">已经到底啦</view>
            <view class="right"></view>
          </view>
        </view>
      </view>
      <view class="rent_time">
        <view class="left">{{roomInfo.price}}元/每小时</view>
        <button class="right">租</button>
      </view>
    </view>
  </div>
</template>

<script>
  import {api} from "../../utils/api";
  import {wxutil} from "../../utils/wxutils";
  import information from "@/components/information";
  import tag from '@/components/tag'
  import card from '@/components/card'
  import {info} from "../../utils/userinfo";

  export default {
    components: {
      information,
      tag,
      card
    },
    data() {
      return {
        roomInfo:null,
        focus: false,
        isShowView: true,
        // tab切换
        currentTab: 0,
        dynamics: null,
        isMyself: false,
      }
    },
    async mounted() {
      this.roomInfo = null;
      this.dynamics = null;
      wxutil.showLoading({title: "加载中...", mask: true})
      const uid = this.$root.$mp.query.uid;
      // const uid = 309;
      const res = await api.getRoomInfo(uid);
      this.roomInfo = res.data;
      wxutil.hideLoading();
      const dynamicRes = await api.getDynamics(uid)
      this.dynamics = dynamicRes.data;
      this.isMyself = this.roomInfo.ownerId === info.getUserInfo().id;
    },
    methods: {
      switchNav: function (current) {
        if (this.currentTab === current) {
          return;
        }
        this.currentTab = current;
      },
      //轮播图的切换事件
      swiperChange: function (e) {
        this.swiperCurrent = e.mp.detail.current;
      }
    }
  }
</script>

<style scoped>
  .content {
    padding-bottom: 98rpx;
  }

  /*轮播图  */

  .round_view {
    position: relative;
  }

  .round_view .swiper {
    width: 100%;
    height: 894rpx;
  }

  .roundImg {
    width: 100%;
    height: 894rpx;
  }

  .round_view .dots {
    position: absolute;
    bottom: 100rpx;
    display: flex;
    left: 50%;
    transform: translate(-50%);
  }

  .round_view .dots .dot {
    margin-right: 10rpx;
    width: 12rpx;
    height: 12rpx;
    background: #d8d8d8;
    border-radius: 50%;
  }

  .round_view .dots .dot .active {
    background: #ff6d6d;
  }

  /*选项卡选中的样式  */
  .on {
    color: #fff;
    border-bottom: 6rpx solid #fff;
  }

  .null_view {
    width: 100%;
    height: 20rpx;
    background: #eee;
  }

  /*选项标题  */

  .tabs {
    width: 100%;
    height: 88rpx;
    border-bottom: 1rpx solid #eee;
    position: absolute;
    z-index: 999;
    top: 806rpx;
    opacity: 0.5;
    background: #2f2f2f;

  }

  /*朋友圈  */

  .tabs_left {
    width: 374rpx;
    height: 88rpx;
    float: left;
    font-size: 36rpx;
    color: #fff;
  }

  .firend {
    text-align: center;
    margin: 0rpx 132rpx 0rpx 134rpx;
    padding: 20rpx 0 8rpx 0;
    box-sizing: border-box;
    width: 132rpx;
    height: 88rpx;
  }

  /*朋友圈  */

  .left {
    width: 100%;
    height: 100%;
  }

  .info_right {
    width: 138rpx;
    height: 148rpx;
    float: left;
    padding: 20rpx 30rpx 20rpx 0;
    box-sizing: border-box;
  }

  .icon_rent {
    width: 108rpx;
    height: 108rpx;
  }

  /*语音区样式  */

  .left .sound {
    width: 100%;
    height: 100%;
    background: #eee;
  }

  .sound_one {
    width: 100%;
    height: 232rpx;
    background: #fff;
    margin-bottom: 20rpx;
    padding-left: 30rpx;
    box-sizing: border-box;
  }

  .sound_one_top {
    width: 100%;
    height: 142rpx;
    border-bottom: 1rpx solid #eee;
  }

  .null_view2 {
    width: 100%;
    height: 98rpx;
  }

  /*头像  */

  .headerPic {
    width: 94rpx;
    height: 142rpx;
    float: left;
    padding-top: 40rpx;
    padding-bottom: 30rpx;
    box-sizing: border-box;
  }

  .message {
    width: 626rpx;
    /* height: 232rpx; */
    float: left;
  }

  .message .top {
    width: 100%;
    height: 68rpx;
  }

  /*名字  */

  .nickname {
    padding: 20rpx 40rpx 8rpx 0;
    box-sizing: border-box;
    font-size: 28rpx;
    float: left;
    color: #666;
  }

  /*时间  */

  .time {
    padding: 24rpx 0 10rpx 0;
    box-sizing: border-box;
    font-size: 24rpx;
    color: #999;
    float: left;
  }

  .message .bottom {
    width: 100%;
    height: 80rpx;
  }

  .voice {
    background: #fff;
    border: 1rpx solid #999;
    border-radius: 4rpx;
    height: 60rpx;
    float: left;
    padding: 10rpx;
    box-sizing: border-box;
    margin-right: 20rpx;
    clear: both;
  }

  /*声音图片样式  */

  .icon_sound, .icon_voice {
    width: 40rpx;
    height: 40rpx;
  }

  .icon_sound {
    margin-right: 8rpx;
  }

  /*时长样式  */

  .voice_count {
    height: 78rpx;
    font-size: 24rpx;
    color: #999;
    line-height: 60rpx;
    float: left;
  }

  .sound_one_bottom {
    /* padding-left: 320rpx; */
    height: 74rpx;
    /* box-sizing: border-box; */
    width: 100%;
  }

  .test {
    float: right;
    height: 74rpx;
    margin-right: 40rpx;
  }

  /*评论收听的共同样式  */

  .comment, .listen {
    float: left;
    height: 74rpx;
    padding: 22rpx 0 20rpx 0;
    box-sizing: border-box;
  }

  .comment {
    margin-right: 58rpx;
  }

  .img_view {
    margin-bottom: 22rpx;
    float: left;
    font-size: 24rpx;
    color: #666;
  }

  /*评价和收听的图标  */

  .icon_comment, .icon_listen {
    width: 40rpx;
    height: 40rpx;
    margin-right: 22rpx;
  }

  .icon_img {
    width: 72rpx;
    height: 72rpx;
    border-radius: 36rpx;
    border: 1rpx solid #eee;
  }

  /*个人信息  */

  .tabs_right {
    width: 374rpx;
    height: 88rpx;
    float: right;
    font-size: 36rpx;
    color: #fff;
    border-left: 1rpx solid #f3f3f3;
  }

  .personal {
    text-align: center;
    margin: 0rpx 114rpx 0rpx 116rpx;
    padding: 20rpx 0 8rpx 0;
    box-sizing: border-box;
    width: 146rpx;
    height: 88rpx;
  }

  .right {
    width: 100%;
  }

  /*标签  */

  .tag_content {
    flex-wrap: wrap;
    display: -webkit-flex;
    flex-direction: row;
    padding: 0 0 32rpx 40rpx;
    box-sizing: border-box;
  }

  .tag_name {
    width: 100%;
    height: 72rpx;
    background: #f3f3f3;
    clear: both;
    padding: 16rpx 0 16rpx 40rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #666;
  }

  .tags {
    white-space: nowrap;
    padding: 4rpx 12rpx 4rpx 12rpx;
    box-sizing: border-box;
    border: 1rpx solid #333;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #333;
    float: left;
    margin-right: 20rpx;
    margin-top: 24rpx;
  }

  /*我的信息  */

  .info_content {
    padding-left: 40rpx;
    padding-bottom: 80rpx;
    box-sizing: border;
  }

  .my_info {
    width: 100%;
    height: 80rpx;
    border-bottom: 1rpx solid #eee;
  }

  /*信息内容的共同样式  */

  .my_info_left, .my_info_right {
    padding: 20rpx 0 20rpx 0;
    box-sizing: border-box;
    height: 80rpx;
    text-align: left;
    font-size: 28rpx;
    color: #999;
    float: left;
  }

  .my_info_left {
    width: 162rpx;
  }

  .my_info_right {
    width: 548rpx;
  }

  .my_info_right view {
    margin-right: 20rpx;
    float: left;
  }

  /*个性签名的高度  */

  .last {
    height: 100rpx;
    border-bottom: none;
    margin-bottom: 80rpx;
  }

  .get_bottom {
    width: 100%;
    height: 41rpx;
    margin-bottom: 64rpx;
  }

  .get_bottom .left {
    width: 294rpx;
    /* height:3rpx; */
    border-top: 1rpx dotted #666;
    float: left;
    margin-top: 20rpx;
    margin-right: 10rpx;
  }

  .get_bottom .right {
    width: 294rpx;
    border-top: 1rpx dotted #666;
    float: left;
    margin-top: 20rpx;
  }

  .get_bottom .center {
    color: #666;
    font-size: 28rpx;
    width: 140rpx;
    height: 40rpx;
    margin-right: 10rpx;
    float: left;
    line-height: 40rpx;
  }

  /*签名内容  */

  .spec {
    padding-right: 128rpx;
    box-sizing: border-box;
    margin-bottom: 80rpx;
  }

  .rent_time {
    width: 100%;
    height: 98rpx;
    /* background: #ff6d6d; */
    position: fixed;
    bottom: 0;
  }

  .rent_time .left {
    font-size: 28rpx;
    color: #333;
    text-align: center;
    line-height: 98rpx;
    width: 466rpx;
    height: 98rpx;
    background: #f3f3f3;
    float: left;
  }

  .rent_time .right {
    border-radius: 0;
    width: 284rpx;
    height: 98rpx;
    background: #ff6d6d;
    float: left;
    color: #fff;
    font-size: 50rpx;
    line-height: 98rpx;
  }

</style>
